<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布-五角星</title>
</head>
<body onload="draw('myCanvas')" >

<canvas id="myCanvas" width="364" height="364" style="border:red 1px solid;position:absolute;top:0;left:0"></canvas>

<script>
    function draw(id) {

    var canvas = document.getElementById(id);
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#827839";
    //ctx.shadowColor = "#000000";
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 12;
    ctx.shadowBlur = 18;


    // 开始一条新路径
    ctx.beginPath();
    /*ctx.moveTo(15,150)   +30   -8
    ctx.lineTo(100,140);        // 2
    ctx.lineTo(170,80);            // 3
    ctx.lineTo(230,140);        // 4
    ctx.lineTo(315,150);        // 5
    ctx.lineTo(230,200);        // 6
    ctx.lineTo(300,263);        // 7
    ctx.lineTo(170,220);        // 8
    ctx.lineTo(30,263);            // 9
    ctx.lineTo(100,200);        // 10

    //ctx.lineTo(15,150);    // 结束
    ctx.closePath();
    ctx.fill();*/

    ctx.moveTo(45,142);        // 起点
    ctx.lineTo(129,126);        // 2
    ctx.lineTo(172,40);            // 3
    ctx.lineTo(215,126);        // 4
    ctx.lineTo(299,142);        // 5
    ctx.lineTo(240,203);        // 6
    ctx.lineTo(252,288);        // 7
    ctx.lineTo(172,252);        // 8
    ctx.lineTo(92,288);            // 9
    ctx.lineTo(105,203);        // 10

    //ctx.lineTo(15,150);    // 结束
    ctx.closePath();
    ctx.fill();
    }

    //window.addEventListener("load",init.false);
</script>

</body>
</html>